<template>
  <div class="sty-setting">
    <div v-for="(item, index) in moduleSetting" :key="index" style="padding-left:11px;">
      <div v-if="showModule(item)" class="common-box">
        <span class="common-title">{{ item.title }}</span>
        <div class="common-border">
          <div v-for="(items, i) in item.config" :key="i">
            <div class="common-item">
              <span v-if="items.label" style="font-size: 14px;margin-right: 12px;color: #999">{{ items.label }}</span>
              <!-- 颜色选择器 -->
              <el-color-picker v-if="items.name === 'ColorPicker'" v-model="items.value" :show-alpha="true" color-format="rgb" size="small" @change="getConfig"/>
              <!-- 下拉框选择 -->
              <el-select
                v-if="items.name === 'Select'"
                v-model="items.value"
                :style="items.width ? {width: items.width} : {width: '56px'}"
                size="mini"
                placeholder="请选择"
                @change="getConfig">
                <template>
                  <el-option
                    v-for="i in items.options"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value" />
                </template>
              </el-select>
              <!-- 数字下拉项 -->
              <el-select
                v-if="items.name === 'number'"
                v-model="items.value"
                :style="items.width ? {width: items.width} : {width: '56px'}"
                filterable
                allow-create
                size="mini"
                placeholder="请选择"
                @change="getConfig">
                <template>
                  <el-option
                    v-for="i in items.options"
                    :key="i"
                    :label="i"
                    :value="i" />
                </template>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { axisConfig } from '../commonStySetting/mixins/styData';

export default {
  props: {
    module: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moduleSetting: JSON.parse(JSON.stringify(axisConfig)),
      isUpload: true
    };
  },
  methods: {
    setDefault(oldData) {
      // 把接口返回的数据注入到 moduleSetting
      if (oldData) {
        try {
          const setting = JSON.parse(oldData);
          if (setting instanceof Array) {
            if (setting && setting.length) {
              setting.forEach(i => {
                this.moduleSetting.forEach(j => {
                  if (i.title === j.title) {
                    this.setConfig(i.config, j.config);
                  }
                });
              });
            }
          } else if (setting instanceof Object) {
            this.moduleSetting.forEach(i => {
              if (setting[i.id] && i.config) {
                i.config.forEach(j => {
                  if (setting[i.id][j.word] || setting[i.id][j.word] === 0) {
                    j.value = setting[i.id][j.word];
                  }
                });
              }
            });
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    setConfig(newConfig, defaultConfig) {
      newConfig.forEach(i => {
        defaultConfig.forEach(j => {
          if (i.word === j.word) {
            j.value = i.value;
          }
        });
      });
    },
    getStyle(extendParams = {}) { // 最终生成数据
      const style = {};
      this.moduleSetting.forEach(items => {
        const obj = {};
        if (items.config && items.config.length) {
          items.config.forEach(j => {
            obj[j.word] = j.value;
          });
        }
        style[items.id] = obj;
      });
      Object.assign(style, extendParams);
      return JSON.stringify(style);
    },
    getConfig() {
      this.$emit('getConfig', this.moduleSetting);
    },
    /**
     * tool
     */
    showModule(item) {
      const isCommon = !item.useModule || item.useModule.length === 0;
      const isUseModule = item.useModule.includes(this.module);
      const isWithout = item.without ? item.without.includes(this.module) : false;
      return (isCommon || isUseModule) && !isWithout;
    }
  }
};
</script>
<style lang="scss" scoped>
.sty-setting {
  .common-box {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .common-title {
      font-size: 14px;
      font-weight: 500;
      color: #666;
      white-space: nowrap;
    }
    .common-border {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
      @media screen and (max-width: 1200px) {
        flex-flow:row wrap;
      }
    }
    .common-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 32px;
      &::v-deep {
        .el-color-picker, .el-color-picker .el-color-picker__trigger {
          width: 38px;
          height: 22px;
        }
        .el-input__inner{
          width: 100% ;
        }
      .medium-file-uploader {
        width: 50px;
        height: 50px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .bg-uploader-icon {
          font-size: 16px;
          color: #8c939d;
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
        }
        .bg {
          width: 50px;
          height: 50px;
          display: block;
        }
      }
      }

      .upload-box {
        position: relative;
      }
      .clear-img {
        width: 12px;
        height: 12px;
        line-height: 12px;
        text-align: center;
        position: absolute;
        top: -2px;
        right: -2px;
        background: #406EFF;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
  .input-number {
    width: 100px;
  }
}
</style>
